<template>
  <div class="main-header">
    <div class="left-menu">
      <span class="iconfont icon-menu"
            @click='openSidebar'></span>
    </div>
    <div class="middle-menu">
      <router-link to="/findmusic/recommend"
                   class="iconfont icon-wangyiyunyinlezizhi"></router-link>
      <router-link to="/musiclist"
                   class="iconfont icon-yinyue"></router-link>
      <router-link to="/mymusic"
                   class="iconfont icon-wo"></router-link>
    </div>
    <div class="right-menu">
      <span class="iconfont icon-sousuo"
            @click='search'></span>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
//  import vuerouter from 'vue-router'
export default {
  name: 'mainheader',
  created() {
    // console.log(this.$router.path)
  },
  methods: {
    openSidebar() {
      this.$emit('openSidebar');
    },
    search() {
      this.$emit('openSearch');
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import url('../../../../static/css/iconfont.css');
@import "../../../../static/base/public";

.main-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  background: $baseColor;
  display: flex;
  height: 1.3rem;
  line-height: 1;
  color: #ffffff;
  .left-menu,
  .right-menu {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 .26rem;
  }
  .middle-menu {
    a {
      padding: 0 .43rem;
    }
    flex: auto;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  .iconfont {
    font-size: 0.6rem;
    color: rgba(#ffffff, .7)
  }
}
</style>
